<template>
  <div>
    <div class="nav-box">
      <div class="nav">
        <div class="left-nav">
          <a href="#/first" class="logo">
            <img
              src="https://oss-xpc0.xpccdn.com/Upload/edu/2018/05/115af5498aa6407.png"
              alt="gm-ck"
            />
          </a>
          <ul>
            <li>
              <router-link to="/first" active-class="active"
                ><span>首页</span></router-link
              >
            </li>
            <li>
              <router-link to="/channel" active-class="active"
                ><span>频道</span></router-link
              >
            </li>
            <!-- <li>
              <router-link to="/behind" active-class="active"
                ><span>幕后</span></router-link
              >
            </li> -->
            <li>
              <router-link to="/topic" active-class="active"
                ><span>专题</span></router-link
              >
            </li>
            <li>
              <router-link to="/activity" active-class="active"
                ><span>活动</span></router-link
              >
            </li>
            <!-- <li>
              <router-link to="/diy" active-class="active"
                ><span>自制</span></router-link
              >
            </li> -->
          </ul>
        </div>
        <div class="right-nav">
          <div class="inp">
            <input @focus="goSearch" type="text" />
            <span @click="goSearch" class="iconfont icon-big-mirror"></span>
          </div>
          <div>
            <div v-if="!ifUser" class="login">
              <ul>
                <li>
                  <router-link :to="'/login'">登录</router-link>
                </li>
              </ul>
            </div>
            <div v-if="ifUser" class="userInfo">
              <div class="all">
                <img src="https://z3.ax1x.com/2021/11/16/IhlFRf.jpg" />
                <span>七里香</span>
              </div>
              <ul>
                <li @click="goUser">我的主页</li>
                <li>账号设置</li>
                <li>推荐影片</li>
                <li @click="outUser">退出</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div :style="{ opacity: op == 0 ? 0 : 1 }" class="go-top">
      <span @click="goTop" class="go"> </span>
    </div>

    <div class="w">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      compName: "gmFirst",
      op: 0,
      ifUser: false,
    };
  },
  methods: {
    goTop() {
      document.documentElement.scrollIntoView({
        block: "start",
        behavior: "smooth",
      });
    },
    show() {
      let scrollTop = document.documentElement.scrollTop;
      if (scrollTop > 90) {
        this.op = 1;
      } else {
        this.op = 0;
      }
    },
    goSearch() {
      this.$router.push({ path: "/search" });
    },
    onUser() {
      if (localStorage.userToken == null) {
        this.ifUser = false;
      } else {
        this.ifUser = true;
      }
    },
    goUser() {
      this.$router.push({ path: "/user" });
    },
    outUser() {
      this.$store.state.token = null;
      localStorage.clear("userToken");
      this.$router.push("/");
    },
  },
  mounted() {
    window.addEventListener("scroll", this.show);
    this.onUser();
  },
};
</script>

<style lang="scss" scoped>
.w {
  padding-top: 65px;
}
.nav-box {
  display: flex;
  justify-content: center;
  background-color: rgb(249, 249, 249);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  .nav {
    width: 1180px;
    display: flex;
    justify-content: space-between;
    .left-nav {
      display: flex;
      align-items: center;
      a.logo {
        display: block;
        width: 100px;
        height: 32px;
        img {
          width: 100px;
          height: 32px;
        }
      }
      ul {
        display: flex;
        padding-left: 34px;
        li {
          box-sizing: border-box;
          cursor: pointer;
          a:hover {
            border-bottom: 4px solid #2689ff;
            span {
              color: #3498db;
            }
          }
          a {
            display: block;
            padding: 15px 14px 15px 14px;
          }
          .active {
            border-bottom: 4px solid #2689ff;
            span {
              font-weight: bold;
            }
          }
        }
      }
    }
    .right-nav {
      display: flex;
      align-items: center;
      .inp {
        border: 1px solid #ccc;
        padding: 0 10px 0 4px;
        input {
          padding: 5px 40px 5px 10px;
          border: none;
          outline: none;
        }
        span {
          font-size: 18px;
          color: #666;
          vertical-align: middle;
          cursor: pointer;
        }
      }
      .login {
        ul {
          display: flex;
          li {
            a {
              display: inline-block;
              font-size: 14px;
              width: 120px;
              text-align: center;
            }
          }
        }
      }
      .userInfo {
        width: 120px;
        height: 30px;
        font-size: 14px;
        cursor: pointer;
        z-index: 999;
        padding-left: 16px;
        &:hover {
          ul {
            display: block;
          }
        }
        .all {
          width: 120px;
          height: 30px;
          line-height: 30px;
          padding-bottom: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding-right: 4px;
          }
          span {
            display: inline-block;
            text-align: center;
          }
        }
        ul {
          background-color: #fff;
          display: none;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
          li {
            line-height: 30px;
            text-align: center;
            &:hover {
              background-color: #3498db;
              color: #fff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.go-top {
  position: fixed;
  bottom: 40px;
  left: 1570px;
  width: 46px;
  z-index: 999;
  transition: all 0.3s linear;
  span {
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    background-image: url(https://www.vmovier.com/Public/Home/images/go-top.png?20140321);
    cursor: pointer;
  }
  .go {
    background-position: 0 -150px;
    &:hover {
      background-position: 0 -250px;
    }
  }
}
</style>